<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="../lib/index.js"></script>
</head>

<body>
  <canvas id="canvasId" width="400" height="400"></canvas>
</body>

</html>
<script>
  const ctx = document.getElementById("canvasId");
  const gl = ctx.getContext("webgl");

  // 定义顶点着色器源码 gl_Position vec4(1.0, 0.0, 0.0, 1.0) x,y,z, w齐次坐标 （x/w,y/w,z/w）
  const VERTEX_SHADER_SOURCE = `
    void main() {
      // 设置顶点位置
      gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
      // 设置点的大小
      gl_PointSize = 100.0;
    }
  `;

  // 定义片元着色器源码
  const FRAGMENT_SHADER_SOURCE = `
    precision lowp float;
    // 主函数
    void main() {
      // 计算距离
      float dis = distance(gl_PointCoord, vec2(0.5, 0.5));
      // 如果距离大于0.5，则设置片元颜色为红色，否则设置为透明
      // if(dis > 0.5) {
      //   gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
      // } else {
      //   gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      // }
      if(dis > 0.5 || (dis < 0.4 && dis > 0.3) || dis < 0.2 ) {
        discard;
      } else {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      }
    }
  `;


  const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE);

  gl.drawArrays(gl.POINTS, 0, 1); // gl.POINTS绘制点，0表示从第0个点开始绘制，1表示绘制1个点
</script>